<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="shortcut icon"  href="images/网易云音乐.ico" >
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="js/index.js"></script>
    <script src="js/goSearch.js"></script>
</head>
<body>
    <div class="nav">
        <div class="nav-mid">
            <a  href=""><p class="logo"></p></a>
            <ul>
                <a href="javascript:void(0)"><li class="li-select">发现音乐 <span class="nav-get span-select"></span></li></a>
                <a href="javascript:void(0)"><li>我的音乐 <span class="nav-get"></span></li></a>
                <a href="javascript:void(0)"><li>朋友 <span class="nav-get"></span></li></a>
                <a href="javascript:void(0)"><li>商城 <span class="nav-get"></span></li></a>
                <a href="javascript:void(0)"><li>音乐人 <span class="nav-get"></span></li></a>
                <a href="javascript:void(0)"><li>下载客户端 <span class="nav-get"></span><sup></sup></li></a>
            </ul>
            <script>
                $(".nav-mid li").click(function(){
                    $(".nav-mid li").removeClass("li-select")
                    $(this).addClass("li-select")
                    $(".nav-get").removeClass("span-select")
                    $(this).children("span").addClass("span-select")
                    // console.log(123)
                })
            </script>
            <div class="nav-mid-right">
                <div class="input">
                    <button id="btnInput"></button>
                    <input id="searchInput" type="text" placeholder="音乐/视频/电台/用户">
                </div>
                <div class="suggest">
                    <a href="">
                        创造者中心           
                    </a>
                </div>
                <a class="sign" href="javascript:void(0)">登录</a>
            </div> 
        </div>
    </div>
    <div class="list-nav">
        <div class="list-nav-body">
            <ul class="list-nav-content">
                <li>
                    <a href="javascript:void(0)" class="list-nav-content-select">推荐</a>
                </li>
                <li>
                    <a href="javascript:void(0)">排行榜</a>
                </li>
                <li>
                    <a href="javascript:void(0)">歌单</a>
                </li>
                <li>
                    <a href="javascript:void(0)">主播电台</a>
                </li>
                <li>
                    <a href="javascript:void(0)">歌手</a>
                </li>
                <li>
                    <a href="javascript:void(0)">新碟上架</a>
                </li>
            </ul>
            <script>
                $(".list-nav-body li a").click(function(){
                    $(".list-nav-body li a").removeClass("list-nav-content-select")
                    $(this).addClass("list-nav-content-select")
                    // console.log(123)
                })
            </script>
        </div>
    </div>
    <div class="roll-play">
        <div class="list-roll">
        <!-- 轮播 -->
        </div>  
        <div class="roll-play-body">
            <div class="content">
                <div class="list-roll">
                    <!-- 轮播 -->
                </div>
                <button id="prev"></button>
                <button id="next"></button>
                <div id="btns">
                    <span class="current"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="content-sign-right"></div>
        </div>

        
    </div>
    <div class="main-body">
        <div class="main-body-left">
            <div class="m-l-one">
                <div class="l-o-top">
                    <p></p>
                    <span>
                        <a href="javascript:void(0)">热门推荐</a>
                    </span>
                    <ul>
                        <li><a href="javascript:void(0)">华语</a></li>
                        <li><a href="javascript:void(0)">流行</a></li>
                        <li><a href="javascript:void(0)">摇滚</a></li>
                        <li><a href="javascript:void(0)">民谣</a></li>
                        <li><a href="javascript:void(0)">电子</a></li>
                    </ul>
                    <span><a href="javascript:void(0)">更多</a></span>
                    <p></p>
                </div>
                <div class="l-o-bottom">
                    
                </div>
            </div>
            
            <div class="m-l-two">
                <div class="l-o-top">
                    <p></p>
                    <span>
                        <a href="javascript:void(0)">新碟上架</a>
                    </span>
                    <span><a href="javascript:void(0)">更多</a></span>
                    <p></p>
                </div>
                <div class="m-l-two-list">
                    <div class="t-list-content" id="t-list-content">
                        <div id="t-list-list" style="left:-620px">
                            <div class="new-song-list">
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/9vgrlw9f.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">Therefore I Am</a></p>
                                    <p><a href="">Billie Eilish</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/i8gtwht0.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">不完美人生指南</a></p>
                                    <p><a href="">鬼卞</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/fpmhg1mw.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">NANA II</a></p>
                                    <p><a href="">欧阳娜娜</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/arsfk9t3.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">Positions</a></p>
                                    <p><a href="">Ariana Grande</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/mvj8m4vz.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">你</a></p>
                                    <p><a href="">黄子韬</a></p>
                                </div>
                            </div>
                            <div class="new-song-list">
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/3su3c80f.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">幸存者 Droifter</a></p>
                                    <p><a href="">林俊杰</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/uqnd0wdh.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">野生歌手</a></p>
                                    <p><a href="">徐秉龙</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/h4v4x4d0.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">AZORAland·我是尤长靖</a></p>
                                    <p><a href="">尤长靖</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/n261iqme.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">致明日的舞</a></p>
                                    <p><a href="">陈奕迅</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/5go5qcfe.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">REVISIT</a></p>
                                    <p><a href="">张国荣</a></p>
                                </div>
                            </div>
                            <div class="new-song-list">
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/9vgrlw9f.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">Therefore I Am</a></p>
                                    <p><a href="">Billie Eilish</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/i8gtwht0.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">不完美人生指南</a></p>
                                    <p><a href="">鬼卞</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/fpmhg1mw.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">NANA II</a></p>
                                    <p><a href="">欧阳娜娜</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/arsfk9t3.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">Positions</a></p>
                                    <p><a href="">Ariana Grande</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/mvj8m4vz.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">你</a></p>
                                    <p><a href="">黄子韬</a></p>
                                </div>
                            </div>
                            <div class="new-song-list">
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/3su3c80f.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>
                                    </div>
                                    <p><a href="">幸存者 Droifter</a></p>
                                    <p><a href="">林俊杰</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/uqnd0wdh.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">野生歌手</a></p>
                                    <p><a href="">徐秉龙</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/h4v4x4d0.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">AZORAland·我是尤长靖</a></p>
                                    <p><a href="">尤长靖</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/n261iqme.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">致明日的舞</a></p>
                                    <p><a href="">陈奕迅</a></p>
                                </div>
                                <div class="new-song">
                                    <div class="new-song-body">
                                        <a href="javascript:void(0)">
                                            <img src="images/5go5qcfe.bmp" alt="" class="new-song-img">
                                            <div class="song-img-cover"></div>
                                        </a>                                    </div>
                                    <p><a href="">REVISIT</a></p>
                                    <p><a href="">张国荣</a></p>
                                </div>
                            </div>
                       </div>
                       
                    </div>
                    <button id="t-list-prev"></button>
                    <button id="t-list-next"></button>
                </div>
                <script>
                    window.onload = function () {
                        var content = document.getElementById("t-list-content");
                        var list = document.getElementById("t-list-list");
                        var prev = document.getElementById("t-list-prev");
                        var next = document.getElementById("t-list-next");
                        // var btns = document.getElementById("t-list-btns").children;
                        // 点击next加-600px,当left<-3000时,left=-600
                        var index = 0;
                        var animated = false;
                        var timer;
                        next.onclick = function () {
                            if (animated) {
                                return;
                            }
                            animate(-620);
                            index++;
                            if (index > 2) {
                                index = 0;
                            }
                            showBtn();
                        }
                        prev.onclick = function () {
                            if (animated) {
                                return;
                            }
                            index--;
                            animate(620)
                            if (index < 0) {
                                index = 2;  
                            }
                            showBtn();
                        }
                        function animate(offset) {
                            animated = true;
                            var newLeft = parseInt(list.style.left) + offset;
                            // 动画总时长300
                            var time = 300;
                            // 间隔10移动一次
                            var interval = 10;
                            // 每次移动的量
                            var speed = offset / (time / interval);
                            function go() {
                                // 向右移动的条件 speed<0且left>newLeft
                                //向左移动speed>0且left<newLeft;
                                if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)) {
                                    list.style.left = parseInt(list.style.left) + speed + "px";
                                    setTimeout(go, interval);
                                } else {
                                    animated = false;
                                    if (newLeft < -1240) {
                                        list.style.left = "-620px"
                                    } else if (newLeft > -620) {
                                        list.style.left = "-1240px";
                                    } else {
                                        list.style.left = newLeft + "px";
                                    }
                                }
                            }
                            go();

                        }
                        // function showBtn() {
                        //     for (let i = 0; i < btns.length; i++) {
                        //         btns[i].classList.remove("t-list-current");
                        //     }
                        //     btns[index].classList.add("t-list-current")
                        // }
                        // // 给所有的btns的子元素点击事件
                        // for (let i = 0; i < btns.length; i++) {
                        //     btns[i].index = i
                        //     btns[i].onclick = function () {
                        //         var offset = (this.index - index) * -620;
                        //         index = this.index;
                        //         animate(offset);
                        //         showBtn();
                        //     }
                        // }
                        // function play() {
                        //     timer = setInterval(function () {
                        //         next.onclick()
                        //     }, 1500)
                        // }
                        // play();
                        function stop() {
                            clearInterval(timer);
                        }
                        content.onmouseover = function () {
                            stop();
                        }
                        content.onmouseout = function () {
                            play();
                        }

                    }
                </script>
            </div>

            <div class="m-l-three">
                <div class="l-o-top">
                    <p></p>
                    <span>
                        <a href="javascript:void(0)">榜单</a>
                    </span>
                    <span><a href="javascript:void(0)">更多</a></span>
                    <p></p>
                </div>
                <div class="billboard">
                    <div class="bill">
                        <div class="bills">
                            <div class="bill-pic">
                                <img src="images/bill1.jpg" alt="">
                                <a href=""></a>
                            </div>
                            <div class="tit">
                                <a href="">
                                    <h3>云音乐飙升榜</h3>
                                </a>
                                <div class="btn">
                                    <a href=""></a>
                                    <a href=""></a>
                                </div>
                            </div>
                        </div>
                        <dd>
                            <ol>
                                <li>
                                    <span>1</span>
                                    <a href="">天外来物</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>2</span>
                                    <a href="">在哪里都很好</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>3</span>
                                    <a href="">启</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>4</span>
                                    <a href="">天外来物</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>5</span>
                                    <a href="">送一朵愧疚的花</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>6</span>
                                    <a href="">再说句晚安</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>7</span>
                                    <a href="">我吐了</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>8</span>
                                    <a href="">love</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>9</span>
                                    <a href="">SO BAD</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>10</span>
                                    <a href="">Hometown</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                            </ol>
                        </dd>
                        <div class="see-more">
                            <a href="">查看全部></a>
                        </div>
                    </div>
                    <div class="bill">
                        <div class="bills">
                            <div class="bill-pic">
                                <img src="images/bill2.jpg" alt="">
                                <a href=""></a>
                            </div>
                            <div class="tit">
                                <a href="">
                                    <h3>云音乐新歌榜</h3>
                                </a>
                                <div class="btn">
                                    <a href=""></a>
                                    <a href=""></a>
                                </div>
                            </div>
                        </div>
                        <dd>
                            <ol>
                                <li>
                                    <span>1</span>
                                    <a href="">如果当时2020</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>2</span>
                                    <a href="">经济舱(Live)</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>3</span>
                                    <a href="">我很好(吉他版)</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>4</span>
                                    <a href="">经济舱</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>5</span>
                                    <a href="">会不会(正式版)</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>6</span>
                                    <a href="">一花一剑</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>7</span>
                                    <a href="">嘻哈帝国</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>8</span>
                                    <a href="">I Need a Girl,Pt.3</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>9</span>
                                    <a href="">彩卷</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>10</span>
                                    <a href="">执迷不悟(DJ版)</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                            </ol>
                        </dd>
                        <div class="see-more">
                            <a href="">查看全部></a>
                        </div>
                    </div>
                    <div class="bill">
                        <div class="bills">
                            <div class="bill-pic">
                                <img src="images/bill3.jpg" alt="">
                                <a href=""></a>
                            </div>
                            <div class="tit">
                                <a href="">
                                    <h3>云音乐原创歌曲榜</h3>
                                </a>
                                <div class="btn">
                                    <a href=""></a>
                                    <a href=""></a>
                                </div>
                            </div>
                        </div>
                        <dd>
                            <ol>
                                <li>
                                    <span>1</span>
                                    <a href="">Overlove</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>2</span>
                                    <a href="">故城千寻</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>3</span>
                                    <a href="">西施江南</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>4</span>
                                    <a href="">乌托邦</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>5</span>
                                    <a href="">最难写是结尾</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>6</span>
                                    <a href="">一分一寸</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>7</span>
                                    <a href="">三个字</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>8</span>
                                    <a href="">Movie</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>9</span>
                                    <a href="">莫欺少年穷</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                                <li>
                                    <span>10</span>
                                    <a href="">给你十万安全感</a>
                                    <div class="san">
                                        <a href=""></a>
                                        <a href=""></a>
                                        <a href=""></a>
                                    </div>
                                </li>
                            </ol>
                        </dd>
                        <div class="see-more">
                            <a href="">查看全部></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-body-right">
            <div class="right">
                <div class="user">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="">用户登录</a>
                </div>
                <div class="singer">
                    <h3>
                        <span>入驻歌手</span>
                        <a href="">查看全部></a>
                    </h3>
                    <div class="singers">
                        <a href="">
                            <img src="images/mei.jpg" alt="">
                            <div class="mei">
                                <h4>张惠妹aMEI</h4>
                                <p>台湾歌手张惠妹</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="apply">
                    <a href="" class="out">
                        <i class="in">申请成为网易音乐人</i>
                    </a>
                </div>
                <div class="singer">
                    <h3>
                        <span>热门主播</span>
                    </h3>
                    <div class="singers zhubo">
                        <a href="">
                            <img src="images/li.jpg" alt="">
                            <div class="mei li">
                                <p>陈立</p>
                                <p>心理学家、美食家陈立教授</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-content">
            <div class="copyright">
                <ul>
                    <li><a href="">服务条款</a></li>
                    <span>|</span>
                    <li><a href="">隐私政策</a></li>
                    <span>|</span>
                    <li><a href="">儿童隐私政策</a></li>
                    <span>|</span>
                    <li><a href="">版权投诉指引</a></li>
                    <span>|</span>
                    <li><a href="">意见反馈</a></li>
                </ul>
                <p>
                    <span>网易公司版权所有©1997-2020&nbsp;</span>
                    <span>杭州乐读科技有限公司运营：</span>
                    <a href="">浙网文[2018]3506-263号</a>
                </p>
                <p>
                    <span>违法和不良信息举报电话：0571-89853516<nbsp></span>
                    <span>举报邮箱：</span>
                    <a href="" style="color: black;">ncm5990@163.com</a>
                </p>
                <p>
                    <span>粤B2-20090191-18&nbsp;</span>
                    <a href="">工业和信息化部备案管理系统网站&nbsp;&nbsp;</a>
                    <a href=""> 
                        <span class="police"></span>
                        <span>浙公网安33010902002564号</span>
                    </a>
                </p>
            </div>
            <ul class="enter">
                <li>
                    <a href=""></a>
                    <span class=""></span>
                </li>
                <li>
                    <a href=""></a>
                    <span class=""></span>
                </li>
                <li>
                    <a href=""></a>
                    <span class=""></span>
                </li>
                <li>
                    <a href=""></a>
                    <span class=""></span>
                </li>
                <li>
                    <a href=""></a>
                    <span class=""></span>
                </li>
            </ul>
        </div>
        <script>
            var index = 0;
            var time = 0;
            $("#next").click(function(){
                index++;
                if(index>9){
                    index = 0;
                }
                animate(index)
                // console.log(index)
            })
            $("#prev").click(function(){
                index--;
                if(index<0){
                    index = 9;
                }
                // console.log(index)  
                animate(index)        
            })
            $("#btns span").click(function(){
                index = $(this).index();
                animate(index)
            })
            function animate(index){
                $(".list-roll img").eq(index).fadeIn().siblings().fadeOut();
                $(".content .list-roll img").eq(index).fadeIn().siblings().fadeOut();
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
                time = 0;
            }
            setInterval(function () {
                time++;
                if(time == 20){
                    // console.log(index);
                    animate(index);
                    index++;
                    if(index>9){
                    index = 0;
                    }
                    time =0;
                }
            }, 100);
        </script>
    </div>
</body>
</html>